<template>
  <div class="right-container">
    <el-scrollbar>
      <component
        :is='getCurModelComponent'
        :formComponent="formComponent"
      ></component>
    </el-scrollbar>
  </div>
</template>

<script setup>
import { ref, computed, markRaw } from "vue";
import Radio from "@/views/form/manage/design/settingComponent/Radio";
import Input from "@/views/form/manage/design/settingComponent/Input";
import Textarea from "@/views/form/manage/design/settingComponent/Textarea";
import Checkbox from "@/views/form/manage/design/settingComponent/Checkbox";
import SelectSingle from "@/views/form/manage/design/settingComponent/SelectSingle";
import SelectMultiple from "@/views/form/manage/design/settingComponent/SelectMultiple";
import Pagenation from "@/views/form/manage/design/settingComponent/Pagenation";
import FileUpload from "@/views/form/manage/design/settingComponent/FileUpload";
import ImgUpload from "@/views/form/manage/design/settingComponent/ImgUpload";
import Vote from "@/views/form/manage/design/settingComponent/Vote";
import SecondTitle from "@/views/form/manage/design/settingComponent/SecondTitle";
import DateCmp from "@/views/form/manage/design/settingComponent/Date";

const props = defineProps({
  formComponent: {
      type: Object,
  },
})
const formComponent = computed(()=>{
  return props.formComponent
})
const componentsList = ref([
  { component: markRaw(Input), type: 'input' },
  { component: markRaw(Textarea), type: 'textarea' },
  { component: markRaw(Radio), type: 'radio' },
  { component: markRaw(Checkbox), type: 'checkbox' },
  { component: markRaw(SelectSingle), type: 'selectSingle' },
  { component: markRaw(SelectMultiple), type: 'selectMultiple' },
  { component: markRaw(Pagenation), type: 'pagenation' },
  { component: markRaw(FileUpload), type: 'fileUpload' },
  { component: markRaw(ImgUpload), type: 'imgUpload' },
  { component: markRaw(Vote), type: 'vote' },
  { component: markRaw(SecondTitle), type: 'secondTitle' },
  { component: markRaw(DateCmp), type: 'date' },
])
const getCurModelComponent = computed(()=>{
  return componentsList.value.find(item => item.type == formComponent.value.type).component
})
</script>

<style lang="scss" scoped>
.right-container{
}
.form-setting{
.el-select{
  width: 60%;
  }
}
</style>

